<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
      *{margin:0;padding:0}
      ul{width:400px;margin:20px auto;}
      ul li{
        display:inline-block;text-align: center;
        width:50px;height:50px;line-height: 50px;
        background:orange;margin:5px;color:#fff;
      }
      /* A .B{}后代
      A.B{}既具备A也具备.B的（同级二次筛选）
      A>B{}子代
      A+B{}下一个弟弟
      A~B{}兄弟 */
      
      /*结构选择器 
      :nth-child(n)
      :nth-child(2n) (even)偶
      :nth-child(2n+1) (odd)奇
      :nth-of-type(n)
      :first-child -> nth-child(1) 第一个
      :first-of-type -> nth-of-type(1)
      :last-child 最后一个
      :last-of-type
      :only-child 只有一个
      :only-of-type
      :empty 空元素
      */
      ul :nth-child(1){/*所有子元素中*/
        background:green;
        /* 水平半径 / 垂直半径 ，不写/两者相同 */
        /* border-radius:5px 10px; */
        /* 椭圆 height:25px;border-radius: 25px/12px;或50% */
        /* 半圆 height:25px;border-radius:25px 25px 0 0;overflow: hidden; */
        /* 扇形 width:25px;height:25px;border-radius: 25px 0 0 0;overflow: hidden; */
      }
      ul :nth-of-type(2n){/*同类型子元素中*/
        background:pink;
      }
      #box:empty{
        height:100px;
        /*线性渐变linear-gradient，前缀和标准都要写一样的*/
        background: -webkit-linear-gradient(top,red,orange);/*left top从左上到右下 */
        background: linear-gradient(0deg,red,orange);/*0deg角度，标准和前缀不一样*/
        background: linear-gradient(top,red 10%,orange 80%);/*颜色后可以跟范围*/
        background: linear-gradient(top,red 0px,red 50px,orange 50px,orange 100px);/*颜色没有过渡区*/
        background: repeating-linear-gradient(top,red 0px,red 10px,orange 10px,orange 20px);/*颜色平铺*/
      }
      /*否定选择器
      :not()
      */
      ul :not(:nth-child(4)){/*除了第4个*/
        color:purple;
      }

      /*属性选择器*/
      /*ul li[class="zf"]{  /*类名zf */
      /*ul li[class|="zf"]{ /*类名zf或zf-开头 */
      /*ul li[class*="zf"]{ /*类名包含zf字符串 */
      /*ul li[class~="zf"]{ /*类名包含zf */
      /*ul li[class^="zf"]{ /*类名zf开头 */
      ul li[class$="zf"]{   /*类名zf结尾 */
        background:palegreen;
      }

      /*伪元素
      ::first-line 匹配第一行文本
      ::first-letter 匹配第一首字符
      :before DOM元素前
      :after  DOM元素后
      */
      #div1::before{content: '123';}
      #div1::after{
        position:absolute;
        content: '';right:10px;
        width:8px;height:8px;
        border-top:1px solid #666;
        border-right:1px solid #666;
        transform:rotate(45deg);
      }
      #div1{
        width:500px;height:300px;
        /*径向渐变radial-gradient，circle圆，ellipse椭圆,如果宽高一样，椭圆也是正圆*/
        background:-webkit-radial-gradient(circle,red,green);
        background:radial-gradient(circle,red,green);/*渐变大小:closest-side,closest-corner,farthest-side,farthest-corner*/
        background:radial-gradient(100px 50px,red,green);/*垂直和水平半径具体值*/
        background:radial-gradient(ellipse at top,red,green);/*圆心位置或者坐标值50px 50px*/
        background:radial-gradient(circle,red 10px,green 100px);/*渐变颜色范围*/
        background:radial-gradient(circle,red 10px,red,100px,green 100px,green 200px);/*没有过渡区*/
        background:repeating-radial-gradient(circle,red 10px,green 50px);/*颜色平铺*/
      }
      /*360不支持 
      #body :target{
        background: orange;
      } */
  </style>
</head>
<body id="body">
  <div id="box"></div>
  <!-- ul>li*12{$} -->
  <ul>
    <li>1</li>
    <li>2</li>
    <li class="zf zfpx">3</li>
    <li class="zf-px px zf">4</li>
    <li class="zf aa pxzf">5</li>
    <li class="zfpxzf a2">6</li>
    <li class="zf">7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
  </ul>

  <div id="div1"></div>
  <p style="height:1000px"></p>
  <a href="#div1">点击定位到目标元素div1</a>
</body>
</html>